JavaScript Decorator'ları: Metadata Programlama ve YOP Desenleri

JavaScript decorator'ları, sınıfların, metotların, özelliklerin ve parametrelerin davranışını bildirimsel ve yeniden kullanılabilir bir şekilde değiştirmenize veya geliştirmenize olanak tanıyan güçlü ve etkileyici bir meta programlama özelliğidir. Metadata eklemek ve Yönelim Odaklı Programlama (AOP) ilkelerini uygulamak için kısa ve öz bir sözdizimi sunarak, kodun yeniden kullanılabilirliğini, okunabilirliğini ve sürdürülebilirliğini artırırlar. Bu kapsamlı rehber, JavaScript decorator'larını sözdizimlerini, kullanımlarını ve çeşitli senaryolardaki uygulamalarını kapsayacak şekilde ayrıntılı olarak inceleyecektir. Resmi olarak hala gelişmekte olan bir öneri olmasına rağmen, decorator'lar özellikle Angular ve NestJS gibi framework'lerde yaygın olarak benimsenmiştir ve JavaScript geliştirme üzerindeki etkileri yadsınamaz.

JavaScript Decorator'ları Nelerdir?

Decorator'lar, bir sınıf bildirimine, metoda, erişimciye, özelliğe veya parametreye eklenebilen özel bir bildirim türüdür. @expression biçimini kullanırlar; burada expression, süslenmiş bildirim hakkında bilgi içeren, çalışma zamanında çağrılacak bir fonksiyona dönüşmelidir. Esasen, decorator'lar, süslenmiş öğeyi saran veya değiştiren fonksiyonlar olarak hareket eder ve orijinal kodu doğrudan değiştirmeden ek işlevsellik veya metadata eklemenizi sağlar.

Decorator'ları, kod öğelerine eklenebilecek ek açıklamalar veya işaretleyiciler olarak düşünebilirsiniz. Bu işaretleyiciler daha sonra çalışma zamanında günlüğe kaydetme, doğrulama, yetkilendirme veya bağımlılık enjeksiyonu gibi çeşitli görevleri yerine getirmek için işlenebilir. Decorator'lar, endişeleri ayırarak ve tekrarlayan kod miktarını azaltarak daha temiz ve daha modüler bir kod yapısını teşvik eder.

Decorator Kullanmanın Faydaları

• Gelişmiş Kod Yeniden Kullanılabilirliği: Decorator'lar, ortak davranışları uygulamanızın birden çok yerine uygulanabilen yeniden kullanılabilir bileşenlere kapsüllemenizi sağlar. Bu, kod tekrarını azaltır ve tutarlılığı teşvik eder.
• Artırılmış Okunabilirlik: Kesişen endişeleri decorator'lara ayırarak, temel mantığınızı daha temiz ve anlaşılması daha kolay hale getirebilirsiniz. Decorator'lar, ek davranışları bildirimsel bir şekilde ifade etmenin bir yolunu sunarak, kodu daha kendi kendini belgeleyen hale getirir.
• Artırılmış Sürdürülebilirlik: Decorator'lar, modülerliği ve endişelerin ayrılmasını teşvik ederek, uygulamanızı kod tabanının diğer kısımlarını etkilemeden değiştirmeyi veya genişletmeyi kolaylaştırır. Bu, hata riskini azaltır ve bakım sürecini basitleştirir.
• Yönelim Odaklı Programlama (AOP): Decorator'lar, davranışları mevcut koda kaynak kodunu değiştirmeden enjekte etmenize izin vererek AOP ilkelerini uygulamanızı sağlar. Bu, günlüğe kaydetme, güvenlik ve işlem yönetimi gibi kesişen endişeleri ele almak için özellikle kullanışlıdır.

Decorator Türleri

JavaScript decorator'ları, her biri kendi özel amacına ve sözdizimine sahip farklı bildirim türlerine uygulanabilir:

Sınıf Decorator'ları

Sınıf decorator'ları, sınıf yapıcısına uygulanır ve sınıf tanımını değiştirmek veya metadata eklemek için kullanılabilir. Bir sınıf decorator'ı, sınıf yapıcısını tek argüman olarak alır.

Örnek: Bir sınıfa metadata ekleme.

            
function Component(options: { selector: string, template: string }) {
  return function (constructor: T) {
    return class extends constructor {
      selector = options.selector;
      template = options.template;
    }
  }
}

@Component({ selector: 'my-component', template: '
Hello
' })
class MyComponent {
  constructor() {
    // ...
  }
}

console.log(new MyComponent().selector); // Output: my-component

            

              
                Copy
              
            
          

Bu örnekte, Component decorator'ı MyComponent sınıfına selector ve template özelliklerini ekleyerek bileşenin metadata'sını bildirimsel bir şekilde yapılandırmanıza olanak tanır. Bu, Angular bileşenlerinin nasıl tanımlandığına benzerdir.

Metot Decorator'ları

Metot decorator'ları, bir sınıf içindeki metotlara uygulanır ve metotun davranışını değiştirmek veya metadata eklemek için kullanılabilir. Bir metot decorator'ı üç argüman alır:

• Hedef nesne (metodun statik olup olmadığına bağlı olarak ya sınıf prototipi ya da sınıf yapıcısı).
• Metodun adı.
• Metot parametre listesindeki parametrenin dizini.

Örnek: Metot çağrılarını loglama.

            
function Log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${propertyKey} with arguments: ${JSON.stringify(args)}`);
    const result = originalMethod.apply(this, args);
    console.log(`${propertyKey} returned: ${result}`);
    return result;
  }

  return descriptor;
}

class Calculator {
  @Log
  add(a: number, b: number) {
    return a + b;
  }
}

const calculator = new Calculator();
calculator.add(2, 3); // Output: Calling add with arguments: [2,3]
                     //         add returned: 5

            

              
                Copy
              
            
          

Bu örnekte, Log decorator'ı, orijinal metodu yürütmeden önce metot çağrısını ve argümanlarını loglar ve yürütmeden sonra dönüş değerini loglar. Bu, decorator'ların metodun temel mantığını değiştirmeden loglama veya denetleme işlevselliğini uygulamak için nasıl kullanılabileceğine dair basit bir örnektir.

Özellik Decorator'ları

Özellik decorator'ları, bir sınıf içindeki özelliklere uygulanır ve özelliğin davranışını değiştirmek veya metadata eklemek için kullanılabilir. Bir özellik decorator'ı iki argüman alır:

• Hedef nesne (özelliğin statik olup olmadığına bağlı olarak ya sınıf prototipi ya da sınıf yapıcısı).
• Özelliğin adı.

Örnek: Özellik değerlerini doğrulama.

            
function Validate(target: any, propertyKey: string) {
  let value: any;

  const getter = function () {
    return value;
  };

  const setter = function (newVal: any) {
    if (typeof newVal !== 'number' || newVal < 0) {
      throw new Error(`Invalid value for ${propertyKey}. Must be a non-negative number.`);
    }
    value = newVal;
  };

  Object.defineProperty(target, propertyKey, {
    get: getter,
    set: setter,
    enumerable: true,
    configurable: true,
  });
}

class Product {
  @Validate
  price: number;

  constructor(price: number) {
    this.price = price;
  }
}

const product = new Product(10);
console.log(product.price); // Output: 10

try {
  product.price = -5; // Throws an error
} catch (e) {
  console.error(e.message);
}

            

              
                Copy
              
            
          

Bu örnekte, Validate decorator'ı, price özelliğinin negatif olmayan bir sayı olmasını sağlamak için doğrular. Geçersiz bir değer atanırsa, bir hata fırlatılır. Bu, decorator'ların veri doğrulamasını uygulamak için nasıl kullanılabileceğine dair basit bir örnektir.

Parametre Decorator'ları

Parametre decorator'ları, bir metodun parametrelerine uygulanır ve metadata eklemek veya parametrenin davranışını değiştirmek için kullanılabilir. Bir parametre decorator'ı üç argüman alır:

• Hedef nesne (metodun statik olup olmadığına bağlı olarak ya sınıf prototipi ya da sınıf yapıcısı).
• Metodun adı.
• Metot parametre listesindeki parametrenin dizini.

Örnek: Bağımlılıkları enjekte etme.

            
import 'reflect-metadata';

const Injectable = (): ClassDecorator => {
    return (target: any) => {
        Reflect.defineMetadata('injectable', true, target);
    };
};

const Inject = (token: string): ParameterDecorator => {
    return (target: any, propertyKey: string | symbol, parameterIndex: number) => {
        let existingParameters: string[] = Reflect.getOwnMetadata('parameters', target, propertyKey) || [];
        existingParameters[parameterIndex] = token;
        Reflect.defineMetadata('parameters', existingParameters, target, propertyKey);
    };
};

@Injectable()
class Logger {
    log(message: string) {
        console.log(`Logger: ${message}`);
    }
}

class Greeter {
    private logger: Logger;

    constructor(@Inject('Logger') logger: Logger) {
        this.logger = logger;
    }

    greet(name: string) {
        this.logger.log(`Hello, ${name}!`);
    }
}

// Simple dependency injection container
class Container {
    private dependencies: Map = new Map();

    register(token: string, dependency: any) {
        this.dependencies.set(token, dependency);
    }

    resolve(target: any): T {
        const parameters: string[] = Reflect.getMetadata('parameters', target) || [];
        const resolvedDependencies = parameters.map(token => this.dependencies.get(token));
        return new target(...resolvedDependencies);
    }
}

const container = new Container();
container.register('Logger', new Logger());

const greeter = container.resolve(Greeter);
greeter.greet('World'); // Output: Logger: Hello, World!

            

              
                Copy
              
            
          

Bu örnekte, Inject decorator'ı Greeter sınıfının yapıcısına bağımlılıkları enjekte etmek için kullanılır. Decorator, parametreyle bir belirteç ilişkilendirir ve bu belirteç daha sonra bir bağımlılık enjeksiyon kapsayıcısı kullanılarak bağımlılığı çözümlemek için kullanılabilir. Bu örnek, decorator'lar ve reflect-metadata kütüphanesi kullanılarak bağımlılık enjeksiyonunun temel bir uygulamasını sergilemektedir.

Pratik Örnekler ve Kullanım Durumları

JavaScript decorator'ları, kod kalitesini artırmak ve geliştirmeyi basitleştirmek için çeşitli senaryolarda kullanılabilir. İşte bazı pratik örnekler ve kullanım durumları:

Loglama ve Denetleme

Decorator'lar, metot çağrılarını, argümanları ve dönüş değerlerini otomatik olarak loglamak için kullanılabilir, bu da uygulama davranışı ve performansı hakkında değerli bilgiler sağlar. Bu, hata ayıklama ve sorun giderme için özellikle kullanışlı olabilir.

            
function LogMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function (...args: any[]) {
        const startTime = performance.now();
        console.log(`[${new Date().toISOString()}] Calling method: ${propertyKey} with arguments: ${JSON.stringify(args)}`);
        const result = originalMethod.apply(this, args);
        const endTime = performance.now();
        const executionTime = endTime - startTime;
        console.log(`[${new Date().toISOString()}] Method ${propertyKey} returned: ${result}. Execution time: ${executionTime.toFixed(2)}ms`);
        return result;
    };

    return descriptor;
}

class ExampleClass {
    @LogMethod
    complexOperation(a: number, b: number): number {
        // Simulate a time-consuming operation
        let sum = 0;
        for (let i = 0; i < 1000000; i++) {
            sum += a + b + i;
        }
        return sum;
    }
}

const example = new ExampleClass();
example.complexOperation(5, 10);

            

              
                Copy
              
            
          

Bu genişletilmiş örnek, metodun yürütme süresini ölçer ve mevcut zaman damgasıyla birlikte loglar, performans analizi için daha ayrıntılı bilgi sağlar.

Yetkilendirme ve Kimlik Doğrulama

Decorator'lar, bir metodu yürütmeden önce kullanıcı rollerini ve izinlerini kontrol ederek güvenlik politikalarını uygulamak için kullanılabilir. Bu, hassas verilere ve işlevselliğe yetkisiz erişimi önleyebilir.

            
function Authorize(role: string) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        const originalMethod = descriptor.value;

        descriptor.value = function (...args: any[]) {
            const userRole = getCurrentUserRole(); // Function to retrieve the current user's role

            if (userRole !== role) {
                throw new Error(`Unauthorized: User does not have the required role (${role}) to access this method.`);
            }

            return originalMethod.apply(this, args);
        };

        return descriptor;
    };
}

function getCurrentUserRole(): string {
    // In a real application, this would retrieve the user's role from authentication context
    return 'admin'; // Example: Hardcoded role for demonstration
}

class AdminPanel {
    @Authorize('admin')
    deleteUser(userId: number) {
        console.log(`User ${userId} deleted successfully.`);
    }

    @Authorize('editor')
    editArticle(articleId: number) {
        console.log(`Article ${articleId} edited successfully.`);
    }
}

const adminPanel = new AdminPanel();

try {
    adminPanel.deleteUser(123);
    adminPanel.editArticle(456); // This will throw an error because the user role is 'admin'
} catch (error) {
    console.error(error.message);
}

            

              
                Copy
              
            
          

Bu genişletilmiş örnekte, Authorize decorator'ı, metoda erişime izin vermeden önce mevcut kullanıcının belirtilen role sahip olup olmadığını kontrol eder. getCurrentUserRole fonksiyonu (gerçek bir uygulamada gerçek kullanıcı rolünü getirecek olan) kullanıcının mevcut rolünü belirlemek için kullanılır. Kullanıcı gerekli role sahip değilse, bir hata fırlatılır ve metodun yürütülmesi engellenir.

Önbellekleme

Decorator'lar, pahalı işlemlerin sonuçlarını önbelleğe almak için kullanılabilir, bu da uygulama performansını artırır ve sunucu yükünü azaltır. Bu, sık erişilen ve sık değişmeyen veriler için özellikle kullanışlı olabilir.

            
function Cache(ttl: number = 60) { // ttl in seconds, default to 60 seconds
    const cache = new Map();

    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        const originalMethod = descriptor.value;

        descriptor.value = async function (...args: any[]) {
            const cacheKey = `${propertyKey}-${JSON.stringify(args)}`;
            const cachedData = cache.get(cacheKey);

            if (cachedData && Date.now() < cachedData.expiry) {
                console.log(`Retrieving from cache: ${propertyKey} with arguments: ${JSON.stringify(args)}`);
                return cachedData.data;
            }

            console.log(`Executing and caching: ${propertyKey} with arguments: ${JSON.stringify(args)}`);
            const result = await originalMethod.apply(this, args);

            cache.set(cacheKey, {
                data: result,
                expiry: Date.now() + ttl * 1000, // Calculate expiry time
            });

            return result;
        };

        return descriptor;
    };
}

class DataService {
    @Cache(120) // Cache for 120 seconds
    async fetchData(id: number): Promise {
        // Simulate fetching data from a database or API
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve(`Data for ID ${id} fetched from source.`);
            }, 1000); // Simulate a 1-second delay
        });
    }
}

const dataService = new DataService();

(async () => {
    console.log(await dataService.fetchData(1)); // Executes the method
    console.log(await dataService.fetchData(1)); // Retrieves from cache
    await new Promise(resolve => setTimeout(resolve, 121000)); // Wait for 121 seconds to allow the cache to expire
    console.log(await dataService.fetchData(1)); // Executes the method again after cache expiry
})();

            

              
                Copy
              
            
          

Bu genişletilmiş örnek, bir Map kullanarak temel bir önbellekleme mekanizması uygular. Cache decorator'ı, süslenmiş metodun sonuçlarını belirtilen bir yaşam süresi (TTL) boyunca saklar. Metot aynı argümanlarla tekrar çağrıldığında, metot yeniden yürütülmek yerine önbelleğe alınmış sonuç döndürülür. TTL süresi dolduktan sonra metot tekrar yürütülür ve sonuç önbelleğe alınır.

Doğrulama

Decorator'lar, veriler işlenmeden önce doğrulamak için kullanılabilir, bu da veri bütünlüğünü sağlar ve hataları önler. Bu, kullanıcı girdilerini veya harici kaynaklardan alınan verileri doğrulamak için özellikle kullanışlı olabilir.

            
function Required() {
    return function (target: any, propertyKey: string) {
        if (!target.constructor.requiredFields) {
            target.constructor.requiredFields = [];
        }
        target.constructor.requiredFields.push(propertyKey);
    };
}

function ValidateClass(target: any) {
    const originalConstructor = target;

    function construct(constructor: any, args: any[]) {
        const instance: any = new constructor(...args);
        if (constructor.requiredFields) {
            constructor.requiredFields.forEach((field: string) => {
                if (!instance[field]) {
                    throw new Error(`Missing required field: ${field}`);
                }
            });
        }
        return instance;
    }

    const newConstructor: any = function (...args: any[]) {
        return construct(originalConstructor, args);
    };

    newConstructor.prototype = originalConstructor.prototype;
    return newConstructor;
}

@ValidateClass
class User {
    @Required()
    name: string;

    @Required()
    email: string;

    constructor(name: string, email: string) {
        this.name = name;
        this.email = email;
    }
}

try {
    const validUser = new User('John Doe', 'john.doe@example.com');
    console.log('Valid user created:', validUser);

    const invalidUser = new User('Jane Doe', ''); // Missing email
} catch (error) {
    console.error('Validation error:', error.message);
}


            

              
                Copy
              
            
          

Bu örnek iki decorator kullanır: Required ve ValidateClass. Required decorator'ı özellikleri zorunlu olarak işaretler. ValidateClass decorator'ı sınıf yapıcısını yakalar ve tüm zorunlu alanların değerlere sahip olup olmadığını kontrol eder. Eğer zorunlu bir alan eksikse, bir hata fırlatılır.

Bağımlılık Enjeksiyonu

Parametre decorator örneğinde gösterildiği gibi, decorator'lar temel bağımlılık enjeksiyonunu kolaylaştırabilir, bu da bağımlılıkları yönetmeyi ve bileşenleri ayrıştırmayı kolaylaştırır. Daha gelişmiş bağımlılık enjeksiyonu framework'leri mevcut olsa da, decorator'lar basit bağımlılık enjeksiyonu senaryolarını ele almak için hafif ve kullanışlı bir yol sağlayabilir.

Değerlendirmeler ve En İyi Uygulamalar

• Yürütme Bağlamını Anlayın: Decorator fonksiyonuna geçirilen target, propertyKey ve descriptor argümanlarının farkında olun. Bu argümanlar, süslenmiş bildirim hakkında değerli bilgiler sağlar ve davranışını buna göre değiştirmenize olanak tanır.
• Decorator'ları Seyrek Kullanın: Decorator'lar güçlü olsa da, aşırı kullanım karmaşık ve anlaşılması zor koda yol açabilir. Decorator'ları dikkatli bir şekilde ve yalnızca kod yeniden kullanılabilirliği, okunabilirlik veya sürdürülebilirlik açısından açık bir fayda sağladıklarında kullanın.
• Adlandırma Kurallarına Uyun: Decorator'larınızın amacını açıkça belirtmek için açıklayıcı adlar kullanın. Bu, kodunuzu daha kendi kendini belgeleyen ve anlaşılması daha kolay hale getirecektir.
• Endişelerin Ayrımını Koruyun: Decorator'lar belirli kesişen endişelere odaklanmalı ve ilgisiz işlevselliği karıştırmaktan kaçınmalıdır. Bu, kodunuzun modülerliğini ve sürdürülebilirliğini artıracaktır.
• Decorator'larınızı Kapsamlı Test Edin: Diğer tüm kodlar gibi, decorator'lar da doğru çalıştıklarından ve istenmeyen yan etkiler yaratmadıklarından emin olmak için kapsamlı bir şekilde test edilmelidir.
• Yan Etkilere Dikkat Edin: Decorator'lar çalışma zamanında yürütülür. Decorator fonksiyonları içinde karmaşık veya uzun süren işlemlerden kaçının, çünkü bu uygulama performansını etkileyebilir.
• TypeScript Önerilir: JavaScript decorator'ları teknik olarak Babel transpilation ile düz JavaScript'te kullanılabilse de, en yaygın olarak TypeScript ile kullanılırlar. TypeScript, decorator'lar için mükemmel tip güvenliği ve tasarım zamanı kontrolü sağlar.

Küresel Bakış Açıları ve Örnekler

Decorator'ların kolaylaştırdığı kod yeniden kullanılabilirliği, sürdürülebilirlik ve endişelerin ayrımı ilkeleri, dünya genelindeki çeşitli yazılım geliştirme bağlamlarında evrensel olarak uygulanabilir. Ancak, belirli uygulamalar ve kullanım durumları, teknoloji yığınına, proje gereksinimlerine ve farklı bölgelerde yaygın olan geliştirme uygulamalarına bağlı olarak değişebilir.

Örneğin, kurumsal Java geliştirmede, ek açıklamalar (concept olarak decorator'lara benzer) yapılandırma ve bağımlılık enjeksiyonu için (örneğin Spring Framework) yaygın olarak kullanılır. Sözdizimi ve temel mekanizmalar JavaScript decorator'larından farklı olsa da, metaprogramlama ve AOP'nin temel ilkeleri aynı kalır. Benzer şekilde, Python'da decorator'lar birinci sınıf bir dil özelliğidir ve günlüğe kaydetme, kimlik doğrulama ve önbellekleme gibi görevler için sıklıkla kullanılır.

Uluslararası ekiplerle çalışırken veya küresel bir kitleye sahip açık kaynak projelere katkıda bulunurken, açıklığı ve sürdürülebilirliği teşvik eden kodlama standartlarına ve en iyi uygulamalara uymak esastır. Decorator'ları etkili bir şekilde kullanmak, daha modüler ve iyi yapılandırılmış bir kod tabanına katkıda bulunarak, farklı geçmişlere sahip geliştiricilerin işbirliği yapmasını ve katkıda bulunmasını kolaylaştırabilir.

Sonuç

JavaScript decorator'ları, kod yeniden kullanılabilirliğini, okunabilirliğini ve sürdürülebilirliğini önemli ölçüde artırabilen güçlü ve çok yönlü bir meta programlama özelliğidir. Metadata eklemenin ve AOP ilkelerini uygulamanın bildirimsel bir yolunu sağlayarak, decorator'lar ortak davranışları kapsüllemenize, endişeleri ayırmanıza ve daha modüler ve iyi yapılandırılmış uygulamalar oluşturmanıza olanak tanır. Hala aktif geliştirme aşamasında bir öneri olmasına rağmen, decorator'lar Angular ve NestJS gibi framework'lerde zaten geniş çapta benimsenmiştir ve JavaScript ekosisteminin giderek daha önemli bir parçası olmaya hazırlanmaktadır. Decorator'ların sözdizimini, kullanımını ve en iyi uygulamalarını anlayarak, daha sağlam, ölçeklenebilir ve sürdürülebilir uygulamalar oluşturmak için güçlerinden yararlanabilirsiniz.

JavaScript ekosistemi gelişmeye devam ettikçe, dünya genelindeki kullanıcıların ihtiyaçlarını karşılayan yüksek kaliteli yazılımlar oluşturmak için yeni özellikler ve en iyi uygulamalar hakkında bilgi sahibi olmak çok önemlidir. JavaScript decorator'larında ustalaşmak, daha etkili ve üretken bir geliştirici olmanıza yardımcı olabilecek değerli bir beceridir.